// pages/index/zp/index.js
let heightArr = [0]; //存放高度累加的数组
let lastArr = [];
let timer
let onDrawing = false;
let drawIndex = 0; //抽奖过程种选中的格子
let flag = true
let angle = 0
Page({

    /**
     * 页面的初始数据
     */
    data: {
        prizeList: [{
                id: 0,
                index: 1,
                src: '/images/message_after.png',
                prizeName: "谢谢参与"
            },
            {
                id: 1,
                index: 2,
                src: '/images/message_after.png',
                prizeName: "1张卡片"
            },
            {
                id: 2,
                index: 3,
                src: '/images/message_after.png',
                prizeName: "2张卡片"
            },
            {
                id: 3,
                index: 4,
                src: '/images/message_after.png',
                prizeName: "奶茶一杯"
            },
            {
                id: 4,
                index: 5,
                src: '/images/message_after.png',
                prizeName: "3元门票优惠"
            },
            {
                id: 5,
                index: 6,
                src: '/images/message_after.png',
                prizeName: "5元门票优惠"
            },
            {
                id: 6,
                index: 7,
                src: '/images/message_after.png',
                prizeName: "鸡尾酒兑换卷"
            },
            {
                id: 7,
                index: 8,
                src: '/images/message_after.png',
                prizeName: "66现金红包"
            },
        ],
        msgList: [
            { url: "url", title: '恭喜用户"1"获得66现金红包' },
            { url: "url", title: '恭喜用户"2"获得奶茶一杯' },
            { url: "url", title: '恭喜用户"3"获得鸡尾酒兑换卷' },
            { url: "url", title: '恭喜用户"4"获得66现金红包' },
            { url: "url", title: '恭喜用户"5' },
            { url: "url", title: '恭喜用户"6"获得66现金红包' },
            { url: "url", title: '恭喜用户"7"获得奶茶一杯' },
            { url: "url", title: '恭喜用户"8"获得鸡尾酒兑换卷' },
            { url: "url", title: '恭喜用户"9"获得66现金红包' },

        ], // 右侧对应的id
        rightId: 'right0',
        // 左侧当前项
        currentTab: 0,
        // 间距
        last_top: 0,
        // 抽奖过程种选择的是哪个
        drawIndex: null,
        prizeResult: null, //抽奖结果key
        prizeName: null, //抽奖结果
        prizesrc: null,
        zhuanpan_show: false,
        animate: false,
        // 盲盒页面
        getEnvelopeShow: "none",
        sendEnvelopeShow: "none",
        //动画效果
        // 取卡片
        show_l4: "none",
        show_l3: "none",
        show_l2: "none",
        xuanzhuan: {},
        chuxian: {},
        content_animation: {},
        content_font: "0rpx",
        //放卡片
        show_l1: "none",
        sendApper: {},
        sendHeader: {},
        sendContent: {},
        sendBg: {},
        sendFont: "0rpx"
    },

    handleItemTap(e) {
        // console.log(e.currentTarget.dataset.index);
        this.setData({
                currentTab: e.currentTarget.dataset.index,
                rightId: 'right' + e.currentTarget.dataset.index
            })
            // console.log(this.data.currentTab);
    },
    // 右侧滚动事件
    rightscroll(e) {
        let scrollHeight = e.detail.scrollTop;
        // console.log('高度'+scrollHeight);
        // console.log(heightArr);
        for (let i = 0; i < heightArr.length; i++) {
            if (scrollHeight >= heightArr[i] && scrollHeight < heightArr[i + 1]) {
                this.setData({
                    currentTab: i,
                    // rightId: 'right' + i
                });
                return;
            }
        }
    },
    // 得到间距
    effectLast() {
        let query = wx.createSelectorQuery();
        query.select(".right_part").boundingClientRect(rect => {
            let scrollHeight_1 = rect.height
                // console.log('高度' + scrollHeight_1);
                // console.log(heightArr);
            var lastTop = scrollHeight_1 - lastArr[5] - lastArr[4]
            if (lastTop >= 35) {
                this.setData({
                    last_top: (scrollHeight_1 - lastArr[5] - lastArr[4]) + 'px'
                })
            } else {
                this.setData({
                    last_top: "70rpx"
                })
            }

            // 将索引号为5的高度增加范围
            heightArr[5] = heightArr[5] + lastTop
                // console.log(this.data.last_top);
        }).exec();
    },
    // 得到高度
    getHeight() {
        const query = wx.createSelectorQuery()
        query.selectAll('.function_part').boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(function(res) {
            res[0].map(e => {
                    lastArr.push(e.height)
                })
                // console.log(lastArr);
                // 永远拿heightArr最后一项加上将来push进数组的这一项
            res[0].map(val => {
                    let result = val.height + heightArr[heightArr.length - 1]
                    heightArr.push(result);
                })
                // console.log(heightArr);
        })
    },
    // 转盘抽奖事件
    startDraw() {
        // if (onDrawing) {
        //     console.log('可转');
        //     return;
        // } else {
        //     onDrawing = true;
        //     console.log('不可转');
        // }
        // console.log('可');
        // this.changePrize()
        this.setData({
            drawIndex: null,
            prizeResult: null,
            prizesrc: null,
        })
        if (flag) {
            flag = false
            clearInterval(timer);
            timer = setInterval(() => {
                this.changePrize()
            }, 80);

            let random = Math.floor(Math.random() * 5)
            console.log('长度' + this.data.prizeList.length);
            console.log('随机' + random);
            // this.setData({
            //     prizeResult:random
            // })
            let res = {
                stutus: 1,
                prizeResult: this.data.prizeList[random].index,
                prizeName: this.data.prizeList[random].prizeName,
                prizesrc: this.data.prizeList[random].src
            }
            if (res.stutus == 1) {
                // console.log(4);
                setTimeout(() => {
                        clearInterval(timer)
                        timer = setInterval(() => {
                            this.changePrize()
                        }, 200);
                        setTimeout(() => {
                            clearInterval(timer)
                            timer = setInterval(() => {
                                this.changePrize()
                            }, 420);
                            setTimeout(() => {
                                this.setData({
                                    prizeResult: res.prizeResult,
                                    prizeName: res.prizeName,
                                    prizesrc: res.prizesrc,
                                })
                                flag = true
                            }, 1000)
                        }, 1200)
                    }, 1800)
                    // flag = true
            }
            // flag = true
            console.log(flag);
        }


    },
    // 抽奖过程
    changePrize() {
        // console.log(2)3
        drawIndex++;
        drawIndex = drawIndex > 8 ? 1 : drawIndex;
        // console.log(this.data.prizeResult);
        // console.log('序号' + this.data.prizeResult);
        this.setData({
                drawIndex: drawIndex
            })
            // console.log(drawIndex);
        if (this.data.prizeResult == drawIndex) {
            // console.log('匹配');
            clearInterval(timer)
            this.setData({
                zhuanpan_show: true
            })
        }
    },
    // 获奖弹窗取消事件
    zhuanpan_onClose() {
        this.setData({
            zhuanpan_show: false
        })
    },
    againTap() {
        onDrawing = false;
        drawIndex = 0; //抽奖过程KEY
        console.log(1);
        this.setData({
            zhuanpan_show: false,
            drawIndex: null,
            prizeResult: null,
            prizesrc: null,
        })
        this.startDraw()
    },

    GetXin() {
        console.log("取一封");
        setTimeout(() => {
            this.setData({
                show_l2: "block"
            })
        }, 0)
        setTimeout(() => {
            this.setData({
                show_l4: "block"
            })
        }, 0)

        setTimeout(this.sroll_dh, 0)
        setTimeout(this.takedh, 0)
        setTimeout(this.geardh, 0)
        setTimeout(() => {
            this.setData({
                getEnvelopeShow: "flex",
            })
        }, 1900)
        setTimeout(() => {
            this.setData({
                show_l2: "none"
            })
        }, 1900)
        setTimeout(() => {
            this.setData({
                show_l4: "none"
            })
        }, 1900)
        setTimeout(this.chuxian, 1900)
        setTimeout(this.rotate, 2500)
        setTimeout(this.content_animation, 3200)
        setTimeout(this.xialuo, 3500)
        setTimeout(this.resetgeardh, 1900)
        setTimeout(this.resettakedh, 1900)
    },
    xinfengClose() {
        this.setData({
            getEnvelopeShow: "none",
        })
    },

    // 动画部分
    chuxian: function() {

        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate("10rpx", "700rpx").height("300rpx").width("350rpx").opacity(1).step()
        this.setData({
            chuxian: this.animation.export(),
        })
    },
    rotate: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top",
            duration: 1000
        })
        this.animation.rotateX(180).step()
        this.setData({
            xuanzhuan: this.animation.export()
        })
    },
    content_animation: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate(0, -50).height("750rpx").width("700rpx").step()
        this.setData({
            content_font: "40rpx",
            content_index: 6,
            content_animation: this.animation.export()
        })
    },
    xialuo: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate(0, "200rpx").opacity(0).step()
        this.setData({
            content_index: 6,
            xialuo: this.animation.export()
        })
    },
    // 放一封信动画
    sendXin() {
        console.log("寄一封");
        this.setData({
            sendEnvelopeShow: "flex"
        })
        setTimeout(this.sendContent, 0)
        setTimeout(() => {
            this.setData({
                sendFont: "50rpx"
            })
        }, 1000)
    },
    sendContent: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate(0, "-200rpx").height("700rpx").width("700rpx").opacity(1).step()
        this.setData({
            content_index: 6,
            sendContent: this.animation.export()
        })
    },
    sendQueding: function() {
        console.log(1);
        setTimeout(this.sendHeader, 1000)
        setTimeout(this.sendBg, 1000)
        setTimeout(this.sendBg, 1000)
        setTimeout(this.shouContent, 1000)
        setTimeout(this.sendApper, 2500)
        setTimeout(() => {
            this.setData({
                sendEnvelopeShow: "none"
            })
        }, 3000)
        setTimeout(() => {
            this.setData({
                show_l1: "block"
            })
        }, 3000)
        setTimeout(this.putdh, 3000)
    },
    shouContent: function() {
        // console.log( 1);
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate(0, "0rpx").height("300rpx").width("300rpx").step()
        this.setData({
            sendFont: "0rpx",
            content_index: 2,
            sendContent: this.animation.export()
        })

    },
    sendHeader: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "bottom"
        })
        this.animation.opacity(1).step().rotateX(-180).step()
        this.setData({
            content_index: 6,
            sendHeader: this.animation.export()
        })
    },
    sendBg: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.opacity(1).step()
        this.setData({
            content_index: 6,
            sendBg: this.animation.export()
        })
    },
    sendApper: function() {
        this.animation = wx.createAnimation({
            transformOrigin: "top"
        })
        this.animation.translate(0, "-500rpx").opacity(0).step()
        this.setData({
            sendApper: this.animation.export()
        })
    },
    putdh: function() {
        this.putLetterAnimation = wx.createAnimation({
            transformOrigin: "top",
            duration: 1400,
            timingFunction: 'ease-in'
        })
        this.putLetterAnimation.rotateX(180).scale(0.8, 0).step()
        this.setData({ putLetterAnimation: this.putLetterAnimation.export() })

    },
    takedh: function() {
        this.takeLetterAnimation = wx.createAnimation({
            transformOrigin: "bottom",
            duration: 1400,
            timingFunction: 'ease-in'
        })
        this.takeLetterAnimation.translate(0, -50).step()
        this.setData({ takeLetterAnimation: this.takeLetterAnimation.export() })

    },
    resettakedh: function() {
        this.takeLetterAnimation = wx.createAnimation({
            transformOrigin: "bottom",
            duration: 1400,
            timingFunction: 'ease-in'
        })
        this.takeLetterAnimation.translate(0, 0).step()
        this.setData({ takeLetterAnimation: this.takeLetterAnimation.export() })

    },

    sroll_dh: function() {
        this.srollDh = wx.createAnimation({
            transformOrigin: "top",
            duration: 1500,
            timingFunction: 'ease-in'
        })
        this.srollDh.translate(-350, 0).step()
        this.setData({ srollDh: this.srollDh.export() })
    },
    geardh: function() {
        this.gearAnimation = wx.createAnimation({
            // transformOrigin: "top",
            duration: 1500,
            timingFunction: 'ease-in'
        })
        angle = angle + 180
        this.gearAnimation.rotateZ(angle).step()
        this.setData({ gearAnimation: this.gearAnimation.export() })
    },
    resetgeardh: function() {
        this.gearAnimation = wx.createAnimation({
            // transformOrigin: "top",
            duration: 1500,
            timingFunction: 'ease-in'
        })
        this.gearAnimation.rotateZ(angle).step()
        this.setData({ gearAnimation: this.gearAnimation.export() })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

        setTimeout(this.getHeight, 100)
        setTimeout(this.effectLast, 200)

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }

})